<template>
  <div class="nav2">
    <NavTitle title="人员留宿数据">
      <div class="flex items-center">
        <NavButton
          v-for="(item, index) in menuList"
          :key="item.title"
          :plain="activeIndex !== index"
          @click="handleBtn(item, index)"
        >{{ item.title }}</NavButton>
      </div>
    </NavTitle>
    <div class="flex items-center justify-between pt-12px">
      <div class="flex items-center">
        <DwImage :src="useImageUrl('n1.png')" />
        <div class="flex-col-center gap-8px">
          <div class="text-24px font-title">{{ infoData.room }}</div>
          <div>酒店订房数量</div>
        </div>
      </div>
      <div class="flex items-center">
        <div class="flex items-center justify-center main_r bg1">
          <div class="text-18px">男</div>
          <div class="text-18px pl-10px">{{ infoData.male }}</div>
        </div>
        <div class="flex items-center justify-center main_r bg2 ml-23px">
          <div class="text-18px">女</div>
          <div class="text-18px pl-10px">{{ infoData.femal }}</div>
        </div>
      </div>
    </div>
    <div>
      <div class="text-16px">酒店入住排行</div>
      <div v-if="listData.length" class="h-268px">
        <div v-for="(item, index) in listData" :key="item.name" class="list mt-14px">
          <div class="flex items-center gap-22px list_item pr-10px">
            <div class="list_item-l font-title mt-20px">TOP{{ index + 1 }}</div>
            <div class="flex-1 list_item-r">
              <div class="flex items-center justify-between pl-7px">
                <div>{{ item.name }}</div>
                <div class="text-16px font-title">{{ item.total }}</div>
              </div>
              <div class="list_item-p mt-5px">
                <div class="jd" :style="{ width: getPreWidth(item.total) }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <DwEmpty v-else class="h-268px" />
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import NavButton from '@/components/NavButton'
import NavTitle from '@/components/NavTitle'
import { useImageUrl } from '@/utils'
import { jinyangHotelCountApi } from '@/api'
const activeIndex = ref(0)

const menuList = ref([
  {
    title: '昨日',
    type: 1
  },
  {
    title: '今日',
    type: 0
  }
])

const infoData = ref({})
const listData = ref([])
const allWidth = ref(374)

const getPreWidth = (count) => {
  const allCount = listData.value[0].total
  const data = (count / allCount) * allWidth.value
  return data + 'px'
}

const getData = async (date) => {
  const { data } = await jinyangHotelCountApi({
    date
  })
  infoData.value = data || {}
  listData.value = data?.items?.slice?.(0, 5)
}

getData(1)

const handleBtn = (item, index) => {
  getData(item.type)
  activeIndex.value = index
}

</script>

<style lang="scss" scoped>
.nav2 {
  color: #fff;

  .main_r {
    width: 120px;
    height: 100px;
    background-size: 100% 100%;
    padding-top: 26px;
    text-align: center;
  }

  .bg1 {
    background: url(@/assets/n2.png);
  }

  .bg2 {
    background: url(@/assets/n3.png);
  }

  .list_item-l {
    width: 60px;
    height: 22.5px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(222.88deg, rgba(51, 100, 173, 1) 0%, rgba(81, 147, 239, 1) 100%);
  }

  .list_item-p {
    position: relative;
    width: 374px;
    height: 8px;
    background: rgba(37, 75, 135, 0.5);
    border-radius: 10px;

    .jd {
      position: absolute;
      border-radius: 10px;
      left: 0;
      top: -1px;
      height: 10px;
      background: linear-gradient(270deg, rgba(57, 129, 212, 1) 0%, rgba(40, 97, 175, 1) 100%);
    }
  }
  .list {
    &:nth-child(1) {
      .list_item-l {
        background: linear-gradient(243.55deg, rgba(177, 38, 186, 1) 0%, rgba(147, 83, 244, 1) 100%);
      }
    }

    &:nth-child(2) {
      .list_item-l {
        background: linear-gradient(100.7deg, rgba(84, 83, 244, 1) 0%, rgba(46, 62, 190, 1) 100%);
      }
    }
  }
}
</style>
